<!-- 前台注册页面 -->
<template>
    <div class="login_bg">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item>
          <div class="title_style">注册</div>
        </el-form-item>

        <el-form-item label="账号" prop="account">
          <el-input placeholder="请输入账号" v-model="ruleForm.account" clearable><template slot="prepend"><i class="el-icon-user-solid"></i></template></el-input>
        </el-form-item>

        <el-form-item label="名称" prop="name">
          <el-input placeholder="请输入名称" v-model="ruleForm.name" clearable><template slot="prepend"><i class="el-icon-user"></i></template></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input placeholder="请输入密码" v-model="ruleForm.password" type="password" show-password clearable> <template slot="prepend"><i class="el-icon-lock"></i></template></el-input>
        </el-form-item>

        <el-form-item label="角色" prop="roleAid">
          <el-radio-group v-model="ruleForm.roleAid" class="role_style">
            <el-radio :label='"1"'>用户</el-radio>
            <el-radio :label='"2"'>企业</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="电话" prop="phone">
          <el-input placeholder="请输入电话号码" v-model="ruleForm.phone" clearable><template slot="prepend"><i class="el-icon-phone"></i></template></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input placeholder="请输入邮箱" v-model="ruleForm.email" clearable><template slot="prepend"><i class="el-icon-paperclip"></i></template></el-input>
        </el-form-item>

        <el-form-item>
          <div class="btnstyle">
            <el-button type="primary" plain @click="submitForm('ruleForm')">注册</el-button>
            <el-button type="info" plain @click="resetForm('ruleForm')">重置</el-button>
            <el-button type="success" plain @click="returnReceptionLoginPage">返回</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
import { receptionRegister,checkAccountApi } from "../../api/login";
import {checkPhoneIsExist} from '../../api/userManage/index';
export default {
  name:"ReceptionRegister",
  data () {
    var checkEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (!value) {
        return callback(new Error('邮箱不能为空'))
        }
        setTimeout(() => {
            if (mailReg.test(value)) {
                callback()
            } else {
                callback(new Error('请输入正确的邮箱格式'))
            }   
        }, 100)
    }
    var checkAccount = (rule, value, callback) => {
        if (!value) {
        return callback(new Error('账号不能为空'))
        }
        setTimeout(() => {
            const params = {
              account: value,
            }
            checkAccountApi(params).then(res=>{
              if(res.data.data){
                callback(new Error('该账号已存在！'))
              }else{
                callback()
              }
            })
        }, 100)
    }
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!value) {
          return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
          if (!Number.isInteger(+value)) {
              callback(new Error('请输入数字'))
          } else {
              if (phoneReg.test(value)) {
                const params = {
                  phone: value,
                }
                checkPhoneIsExist(params).then(res=>{
                    if(res.data.data){
                        callback(new Error('该手机号已存在，请重新输入！'));
                    }else{
                        callback();
                    }
                });
              } else {
                  callback(new Error('电话号码格式不正确'))
              }
          }
      }, 100)
    }
    return {
      ruleForm: {
        name: '',
        account: '',
        password: '',
        phone: '',
        email: '',
        roleAid: null,
      },
      rules: {
        account: [
          { validator: checkAccount, trigger: ['blur','change'] },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        roleAid: [
          { required: true, message: '请选择角色', trigger: 'change' },
        ],
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        phone: [
          { validator: checkPhone, trigger: ['blur','change'] },
        ],
        email: [
          { validator: checkEmail, trigger: 'blur' },
        ],
      },
    }
  },
  methods:{
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            account: this.ruleForm.account,
            password: this.ruleForm.password,
            roleAid: this.ruleForm.roleAid,
            name: this.ruleForm.name,
            phone: this.ruleForm.phone,
            email: this.ruleForm.email,
          }
          receptionRegister(params).then(res=>{
            if (res.data.code === 10000){
              // 注册成功
              this.$message({
                duration: 1000,
                message: res.data.message,
                type: "success",
              });
              this.$router.push("/reception/login");
            }else {
              this.$message({
                duration: 1000,
                message: res.data.message,
                type: "error",
              });
            }
          }).catch(err=>{
            console.log(err)
            this.$message({
              duration: 1000,
              message: "请求异常！",
              type: "error",
            });
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    returnReceptionLoginPage(){
      this.$router.go(-1);
    }
  }
}
</script>

<style scoped>
 .login_bg{
    width: 98vw;
    height: 97vh;
    background: url("https://img-blog.csdnimg.cn/20191013143546617.png") repeat 0 0;
  }
   .header_style{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
    width: 570px !important;
    height: auto !important;
    background-color: #d0aeef;
    opacity: 0.7;
  }
  .demo-ruleForm{
    width: 530px;
    margin: 0 auto;
    background-color: #e7dcf6;
    opacity: 0.6;
    padding-right: 40px;
    padding-bottom: 30px;
    border-radius: 8px;
  }
  .demo-ruleForm:hover{
      -webkit-box-shadow: #ccc 0px 10px 10px;
      -moz-box-shadow: #ccc 0px 10px 10px;
      box-shadow: #ccc 0px 10px 10px; 
  }
  .title_style{
    margin-top: 30px;
    margin-left: 170px;
    font-family:'Times New Roman', Times, serif;
    font-size: 20px;
    color: #332a3b;
  }
  .logo{
    background-color: #d0aeef;
    opacity: 0.7;
  }
  .role_style{
    display: flex;
    justify-content: space-around;
    position: relative;
    top: 12px;
  }
  .btnstyle{
    display: flex;
    justify-content: space-between;
  }
</style>
